<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '置顶',
  },
}
</route>

<template>
  <view>
    <view class="w-750rpx m-a bg-white box-border pl-59rpx pr-59rpx pt-24rpx pb-24rpx"
      :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
    >
      <view class="w-632rpx m-a pt-68rpx font-size-24rpx font-600">置顶天数（{{ formData.paymentAmount }}乐缘币/天）</view>

      <view class="relative border-2 w-632rpx h-52rpx m-a rounded-10rpx mt-16rpx overflow-hidden mb-32rpx"
        v-if="remainingDays"
      >
        <view class="absolute left-0 top-0 w-full h-full bg-#986DF0 text-center"
          :style="{ width: `${getDaysPercentage}%` }"
        >
          <view class="font-size-18rpx leading-52rpx color-white"
            v-if="getDaysPercentage > 30"
          >{{ remainingDays }}天</view>
        </view>
        
        <view class="absolute left-0 top-0 w-full h-full text-center font-size-18rpx leading-52rpx"
          v-if="getDaysPercentage <= 30"
        >{{ remainingDays }}天</view>
      </view>

      <wd-input 
        type="number" 
        v-model="formData.durationDays" 
        placeholder="请输入置顶天数" 
      />
      <view class="w-632rpx m-a !mt-12rpx font-size-24rpx leading-21rpx">
        共{{ (formData.durationDays || 0) * (formData.paymentAmount || 0) }}乐缘币
      </view>
    </view>
    
    <!-- 使用乐缘币支付 -->
    <view class="btn-full w-center pt-30rpx">
      <wd-button 
        class="btn-w-full btn-h-78"
        :loading="loading"
        @click="submit"
      >使用乐缘币支付</wd-button>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import { GetDefaultAmountConfigQueryCode } from "@/service/db_index";
import { Main } from "@/service/types";
import { useThemeStore, useUserStore } from "@/store";
import { UserTopConfigInfoTop } from "@/service/db_feature";
import { useToast } from "wot-design-uni";
import { QueryUserTopConfigInfoByUserId } from "@/service/db_user";

// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();
const toast = useToast();

// 每天置顶需要的金额
const formData = reactive({
  userId: user.userInfo.id,
  paymentAmount: undefined,
  durationDays: undefined
});

const loading = ref(false);
const submit = async () => {
  try {
    if (!formData.paymentAmount) return toast.show('置顶金额配置出错，请稍后再试！');
    if (!formData.durationDays) return toast.show('请输入置顶天数');
    loading.value = true;
    const _paymentAmount = formData.paymentAmount || 0;
    const _durationDays = formData.durationDays || 0;
    const res = await UserTopConfigInfoTop({
      ...formData,
      paymentAmount: _paymentAmount * _durationDays,
    });
    loading.value = false;
    if (res.code != 200) return toast.show(res.message);
    toast.show('置顶成功!');
    formData.durationDays = undefined;
    queryUserTopConfigInfoByUserId();
  } catch (error) {
    loading.value = false;
    console.log(error);
  }
}

// 获取每天置顶需要的金额
const getDefaultAmountConfigQueryCode = async () => {
  try {
    const res = await GetDefaultAmountConfigQueryCode({
      code: 'top_amount'
    })
    const data = res.data || {} as Main.DefaultAmountConfigQueryCode;
    formData.paymentAmount = data.amount;

    queryUserTopConfigInfoByUserId();
  } catch (error) {
    console.log(error);
  }
}

const durationDays = ref(0);
const remainingDays = ref(0);
// 获取用户置顶配置表详情
const queryUserTopConfigInfoByUserId = async () => {
  try {
    const res = await QueryUserTopConfigInfoByUserId({
      userId: user.userInfo.id,
    })
    const data = res.data || {};
    durationDays.value = data.durationDays || 0;

    const currentTime = +new Date();
    const _endTime = +new Date(data.endTime);
    const remainingTime = _endTime - currentTime;
    if (remainingTime > 0) {
      remainingDays.value = Math.ceil(remainingTime / (1000 * 60 * 60 * 24));
    }
  } catch (error) {
    console.log(error);
  }
}

// 剩余置顶天数百分比
const getDaysPercentage = computed(() => {
  return Math.floor((remainingDays.value / durationDays.value) * 100);
})

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '置顶';
  })
  getDefaultAmountConfigQueryCode();
})
</script>

<style lang="scss" scoped>
</style>
      